<template>
  <div class="mycount-changePhone">
    <van-nav-bar
      title="更改手机号"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="mycount-changePhone-view">
      <van-form  colon  label-width="65px" label-align="right" input-align="left">
        <div>
          <van-field
          class=""
          v-model="changePhone.new_phone"
          name=""
          label="手机"
          placeholder="请输入手机号"
          :rules="[{}]" 
          
        />
        </div>
        
        <br>
        <div>
          <van-field
            v-model="changePhone.verify_code"
            center
            clearable
            label="验证码"
            placeholder="短信验证码"
            required
          >
            <template #button>
              <!-- <span style="color:red" v-show="captchaFlag===true">发送验证码</span> -->
              <h5 style="color:#151515" v-show="captcha==true" @click="verify">发送验证码</h5>
              <!-- <van-button size="small" type="primary"  v-show="captcha==true" @click="verify">发送验证码</van-button> -->
              <div v-show="captcha==false" class="timeDec">
                <van-count-down :time="time"  :auto-start="false" @finish="finish" ref="countDown">
                  <template #default="timeData">
                    <span class="block">{{ timeData.seconds }}</span>
                  </template>
                </van-count-down>
              </div>
            </template>
          </van-field>
        </div>
      </van-form>
    </div>
    <div class="mycount-changePhone-buttom" @click="confirmButtom">
      确定
    </div>
    <van-dialog v-model="show" title="提示" show-cancel-button @confirm="confirmChange">
      <!-- <img src="https://img01.yzcdn.cn/vant/apple-3.jpg" /> -->
      <div class="mycount-changePhone-dialog">
        <span>确认更改</span>
      </div>
      
    </van-dialog>
    <van-dialog v-model="success" title="提示"  @confirm="confirmSuccess">
      <!-- <img src="https://img01.yzcdn.cn/vant/apple-3.jpg" /> -->
      <div class="mycount-changePhone-dialog">
        <span v-show="success_change==true">更改成功</span>
        <span v-show="success_change==false">更改失败，{{errorMsg}}</span>
      </div>
      
    </van-dialog>
  </div>
</template>

<script>
import {changePhone , captchaPhone} from '@/api/user'
export default {
  data(){
    return {
      // 更换手机号
      changePhone:{
        new_phone:'',
        verify_code:'',
      },
      // 验证码显示与隐藏
      captcha:true,
      // 倒计时 60 秒
      time:60000,
      // 确认按钮
      show:false,
      // 更改结果显示
      success:false,
      // 成功修改
      success_change:true,
      // 错误提示
      errorMsg:''
    }
  },
  // beforeCreate () {
  //   document.querySelector('body').setAttribute('style', 'background:#FFFFFF')
  // },
  // beforeDestroy () {
  //   document.querySelector('body').removeAttribute('style')
  // },
  methods:{
    // 返回上一级路由 个人页
    onClickLeft() {
      this.$router.push('/profile')
    },
    confirmButtom(){
      if(this.changePhone.new_phone){
        this.show  = true
      }
    },
    // 弹出框确认按钮
    confirmChange(){
        this.$toast.loading('更改中...');
        // 更换手机号
        changePhone(this.changePhone).then(res=>{
          if(res.code==0 ){
            setTimeout(() => {
            this.$toast.clear();
            this.success = true;
            this.success_change = true
            // this.$router.push('/profile')
            },500)
          }else {
            setTimeout(() => {
            this.$toast.clear();
            this.success = true
            this.success_change = false
            this.errorMsg = res.msg
            // this.$router.push('/profile')
            },500)
          }
        })  
    },
    // 换绑完成后，确认按钮 返回上一路由
    confirmSuccess(){
      this.$router.push('/profile')
    },
    // 发送验证码
    verify(){
       this.$toast.loading('发送验证码...');
      captchaPhone(this.changePhone.new_phone)
       setTimeout(() => {
          this.$toast.clear();
          this.captcha = false;
          this.$refs.countDown.reset();
          this.$refs.countDown.start();
        }, 300);
    },
    // 倒计时结束 ， 显示 发送验证码 
    finish(){
      this.captcha = true
    },
    
  }
}
</script>

<style lang="less">
.mycount-changePhone-view{
  width: 70%;
  margin:  40px auto;
}
.van-nav-bar__arrow {
  margin-right: 4px;
  font-size: 25px;
}
.van-nav-bar__title {
  max-width: 60%;
  margin: 0 auto;
  color: #323233;
  font-weight: 500;
  font-size: 20px;
}
.van-nav-bar .van-icon {
  color: #151515;
}
.timeDec{
  margin-right: 25px;
}
.mycount-changePhone-buttom{
  margin:  10px auto;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70%;
  height: 40px;
  line-height: 50px;
  border-radius: 20px 20px 20px 20px;
  background-color: rgba(98, 166, 235, 100);
  color: rgba(255, 255, 255, 100);
  font-size: 18px;
  text-align: center;
  font-family: Microsoft Yahei;
  border: 1px solid rgba(187, 187, 187, 100);
  
}
 .mycount-changePhone-dialog{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px auto;
    width: 300px;
    height: 50px;
  }
  h5{
    margin: 0px 0px;
  }
</style>
